<template>
  <div>
    <div class="list-table">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="金额及数量" name="1">
          <div class="area-header">
            <span class="area-header-title">{{ $t('金额及数量') }}</span>
          </div>
          <el-form ref="queryForm" :model="queryParams" :inline="true">
            <el-form-item :label="$t('年份')">
              <DatePicker v-model="queryParams.year" type="year" value-format="yyyy" :placeholder="$t('年份')" :clearable="false" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
            </el-form-item>
          </el-form>
          <div class="itemTrading">
            <el-table
              v-loading="loading"
              tooltip-effect="darkTable"
              :data="dataList"
              border
              :cell-style="cellStyle"
              @cell-click="cellClickHandle"
            >
              <el-table-column :label="$t('团队')" align="center" prop="deptName" fixed="left" min-width="120" show-overflow-tooltip />
              <el-table-column label="二月" align="center">
                <el-table-column prop="number2" label="数量" align="center" />
                <el-table-column prop="money2" label="金额" align="right">
                  <template slot-scope="scope">
                    {{ seam(scope.row.money2) }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="三月" align="center">
                <el-table-column prop="number3" label="数量" align="center" />
                <el-table-column prop="money3" label="金额" align="right">
                  <template slot-scope="scope">
                    {{ seam(scope.row.money3) }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="四月" align="center">
                <el-table-column prop="number4" label="数量" align="center" />
                <el-table-column prop="money4" label="金额" align="right">
                  <template slot-scope="scope">
                    {{ seam(scope.row.money4) }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="五月" align="center">
                <el-table-column prop="number5" label="数量" align="center" />
                <el-table-column prop="money5" label="金额" align="right">
                  <template slot-scope="scope">
                    {{ seam(scope.row.money5) }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="六月" align="center">
                <el-table-column prop="number6" label="数量" align="center" />
                <el-table-column prop="money6" label="金额" align="right">
                  <template slot-scope="scope">
                    {{ seam(scope.row.money6) }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="七月" align="center">
                <el-table-column prop="number7" label="数量" align="center" />
                <el-table-column prop="money7" label="金额" align="right">
                  <template slot-scope="scope">
                    {{ seam(scope.row.money7) }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="八月" align="center">
                <el-table-column prop="number8" label="数量" align="center" />
                <el-table-column prop="money8" label="金额" align="right">
                  <template slot-scope="scope">
                    {{ seam(scope.row.money8) }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="九月" align="center">
                <el-table-column prop="number9" label="数量" align="center" />
                <el-table-column prop="money9" label="金额" align="right">
                  <template slot-scope="scope">
                    {{ seam(scope.row.money9) }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="十月" align="center">
                <el-table-column prop="number10" label="数量" align="center" />
                <el-table-column prop="money10" label="金额" align="right">
                  <template slot-scope="scope">
                    {{ seam(scope.row.money10) }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="十一月" align="center">
                <el-table-column prop="number11" label="数量" align="center" />
                <el-table-column prop="money11" label="金额" align="right">
                  <template slot-scope="scope">
                    {{ seam(scope.row.money11) }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="十二月" align="center">
                <el-table-column prop="number12" label="数量" align="center" />
                <el-table-column prop="money12" label="金额" align="right">
                  <template slot-scope="scope">
                    {{ seam(scope.row.money12) }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="一月" align="center">
                <el-table-column prop="number1" label="数量" align="center" />
                <el-table-column prop="money1" label="金额" align="right">
                  <template slot-scope="scope">
                    {{ seam(scope.row.money1) }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column :label="$t('合计')" align="center">
                <el-table-column prop="totalNumber" label="数量" align="center" width="140">
                  <!-- <template slot-scope="scope">
              <el-button type="text">{{ scope.row.totalNumber }}</el-button>
            </template> -->
                </el-table-column>
                <el-table-column prop="totalMoney" label="金额" align="right" width="140">
                  <template slot-scope="scope">
                    {{ seam(scope.row.totalMoney) }}
                  </template>
                </el-table-column>
                <el-table-column prop="lastTotalMoney" label="去年同期" align="right" width="140">
                  <template slot-scope="scope">
                    {{ seam(scope.row.lastTotalMoney) }}
                  </template>
                </el-table-column>
                <el-table-column prop="teamUserCount" label="团队人数" align="right" width="140" />
                <el-table-column prop="gdp" label="人均" align="right" width="140">
                  <template slot-scope="scope">
                    <span class="money-text">{{ seam(scope.row.gdp) }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>

        </el-tab-pane>
        <el-tab-pane label="累计签约" name="2">

          <div class="area-header" style="margin-top:10px">
            <span class="area-header-title">{{ $t('累计签约') }}</span>
          </div>
          <el-table
            v-loading="loading"
            tooltip-effect="darkTable"
            :data="yoyDataList"
            :span-method="objectSpanMethod"
            border
            :cell-style="cellStyle"
            @cell-click="cellClickHandleYOY"
          >
            <!-- <el-table-column :label="$t('团队')" align="center" fixed="left" min-width="150"> -->
            <el-table-column prop="year" label="年份" align="center" />
            <el-table-column prop="deptName" label="团队" align="center" />
            <!-- </el-table-column> -->
            <el-table-column prop="money2" label="二月" align="right">
              <template slot-scope="scope">
                {{ seam(scope.row.money2) }}
              </template>
            </el-table-column>

            <el-table-column prop="money3" label="三月" align="right">
              <template slot-scope="scope">
                {{ seam(scope.row.money3) }}
              </template>
            </el-table-column>

            <el-table-column prop="money4" label="四月" align="right">
              <template slot-scope="scope">
                {{ seam(scope.row.money4) }}
              </template>
            </el-table-column>

            <el-table-column prop="money5" label="五月" align="right">
              <template slot-scope="scope">
                {{ seam(scope.row.money5) }}
              </template>
            </el-table-column>

            <el-table-column prop="money6" label="六月" align="right">
              <template slot-scope="scope">
                {{ seam(scope.row.money6) }}
              </template>
            </el-table-column>

            <el-table-column prop="money7" label="七月" align="right">
              <template slot-scope="scope">
                {{ seam(scope.row.money7) }}
              </template>
            </el-table-column>

            <el-table-column prop="money8" label="八月" align="right">
              <template slot-scope="scope">
                {{ seam(scope.row.money8) }}
              </template>
            </el-table-column>

            <el-table-column prop="money9" label="九月" align="right">
              <template slot-scope="scope">
                {{ seam(scope.row.money9) }}
              </template>
            </el-table-column>

            <el-table-column prop="money10" label="十月" align="right">
              <template slot-scope="scope">
                {{ seam(scope.row.money10) }}
              </template>

            </el-table-column>

            <el-table-column prop="money11" label="十一月" align="right">
              <template slot-scope="scope">
                {{ seam(scope.row.money11) }}
              </template>

            </el-table-column>

            <el-table-column prop="money12" label="十二月" align="right">
              <template slot-scope="scope">
                {{ seam(scope.row.money12) }}
              </template>
            </el-table-column>
            <el-table-column prop="money1" label="一月" align="right">
              <template slot-scope="scope">
                {{ seam(scope.row.money1) }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="totalMoney" label="合计" align="right" width="140">
              <template slot-scope="scope">
                {{ seam(scope.row.totalMoney) }}
              </template>
            </el-table-column> -->
          </el-table>

        </el-tab-pane>

      </el-tabs>
    </div>
    <!-- 添加或修改合同信息对话框 -->
    <el-dialog
      :title="$t('项目签约信息')"
      :visible.sync="contractFormOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="height"
      append-to-body
    >
      <!-- <div class="list-table"> -->

      <el-table
        v-loading="contractLoading"
        border
        max-height="500"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          :label="$t('#')"
          type="index"
          align="center"
          show-overflow-tooltip
          width="50"
        >
          <template slot-scope="scope">
            {{
              (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="dealName" label="项目名称" />
        <el-table-column prop="companyName" label="客户名称" />
        <el-table-column prop="amount" label="签约金额(万)" align="right">
          <template slot-scope="scope">
            {{ scope.row.amount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="personCharge" label="项目负责人" />
        <el-table-column prop="dealType" label="客户类型" />
        <el-table-column prop="signingTime" label="申请时间">
          <template slot-scope="scope">
            {{ formatDate(scope.row.signingTime) }}
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t('导出') }}</el-button>
      </span>

    </el-dialog>

    <el-dialog :title="teamName" :visible.sync="openUser" :close-on-click-modal="false" top="6vh" width="50%" :lock-scroll="true" append-to-body>
      <el-table v-loading="userLoading" max-height="600" tooltip-effect="darkTable" :data="tableData" border>
        <el-table-column :label="$t('姓名')" align="center" prop="name" min-width="150" show-overflow-tooltip />
        <el-table-column :label="$t('所在部门')" align="center" prop="deptName" min-width="100" />
        <el-table-column :label="$t('职位')" align="center" prop="positionName" min-width="100" />
        <el-table-column :label="$t('入职时间')" align="center" prop="entryTime" min-width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.entryTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>

</template>

<script>
// getNewContractInfo
import { reportByYear, getSginContractInfo, reportByYearYoYChange } from '@/api/oa/contract/oaContract'
import moment from 'moment'
import { findUserList } from '@/api/anxin/summary/collectionSummary'

export default {
  components: {
  },
  data() {
    return {
      queryParams: {
        year: this.cYear() + '',
        pageNum: 1,
        pageSize: 10
      },
      params: {
        year: undefined,
        month: undefined,
        deptId: undefined
      },
      loading: false,
      dataList: [],
      yoyDataList: [],
      contractOpen: false,
      contractFormOpen: false,
      contractLoading: false,
      openUser: false,
      userLoading: true,
      tableData: [],
      teamName: '团队人员',
      activeName: '1'
    }
  },
  computed: {

  },
  mounted() {
    this.getList()
     // 同比变动的表
       const year = this.queryParams.year
      reportByYearYoYChange(year).then(res => {
        if (res.code === 200) {
          this.yoyDataList = res.data
        }
        this.loading = false
      })
  },
  methods: {
    getList() {
      this.loading = true
      const year = this.queryParams.year
      reportByYear(year).then(res => {
        if (res.code === 200) {
          this.dataList = res.data
        }
        this.loading = false
      })
    },

    formatDate(date) {
        return moment(date).format('YYYY-MM-DD')
    },
    queryHandle() {
      this.getList()
    },
    cellClickHandle(row, column) {
      if (column.property !== 'deptName') {
        if (column.property === 'teamUserCount') {
          this.userLoading = true
          var deptId = row.deptId
          if (row.deptName === '合计') {
            deptId = 'sum'
          }
          findUserList({ year: row.year }, deptId).then(res => {
            this.tableData = res.data
            this.userLoading = false
            this.openUser = true
          })
        } else if (column.property === 'gdp') {
          return false
        } else {
          this.contractFormOpen = true
          this.contractLoading = true
          const params = {
            year: row.year,
            month: column.property,
            deptId: row.deptId.toString(),
            yoy: 'single'
          }
          console.log(params)
          getSginContractInfo(params).then(res => {
            if (res.code === 200) {
              this.tableData = res.data
            }
            this.contractLoading = false
          })
          this.params = params
        }
      }
    },
     cellClickHandleYOY(row, column) {
      if (column.property !== 'deptName') {
        if (column.property === 'teamUserCount') {
          this.userLoading = true
          var deptId = row.deptId
          if (row.deptName === '合计') {
            deptId = 'sum'
          }
          findUserList({ year: row.year }, deptId).then(res => {
            this.tableData = res.data
            this.userLoading = false
            this.openUser = true
          })
        } else if (column.property === 'gdp') {
          return false
        } else {
          this.contractFormOpen = true
          this.contractLoading = true
          const params = {
            year: row.year,
            month: column.property,
            deptId: row.deptId.toString(),
            yoy: 'yoy'
          }
          getSginContractInfo(params).then(res => {
            if (res.code === 200) {
              this.tableData = res.data
            }
            this.contractLoading = false
          })
          this.params = params
        }
      }
    },
     cellStyle({ row, columnIndex, column }) {
      console.log(column)
       if (row.deptName.indexOf('合计') >= 0) {
        return 'color:#303133;background-color:rgba(230, 162, 60, 0.8);cursor:pointer;'
      } else if (column.property === 'gdp') {
         return 'color:#303133;'
       } else if (column.property === 'deptName') {
         return ''
       } else if (columnIndex > 0) {
        return 'font-weight:700;color:#409EFF ;cursor:pointer; '
      }
      return ''
    },
  seam(number) {
      if (number) {
          return number.toFixed(2)
      } else {
        return '0'
      }
    },
    // 导出项目签约情况详情
    exportHandle() {
      console.log(this.params)
      this.downLoadExcel('/contract/oaContract/reportExport', this.params)
    },
    cYear() {
         return new Date().getMonth() === 0 ? new Date().getFullYear() - 1 : new Date().getFullYear()
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const spanArr = this.rowspan()
        for (let i = 0; i < spanArr.length; i++) {
          const _row = spanArr[rowIndex]
          return {
            rowspan: _row,
            colspan: 1
          }
        }
      }
    },
    rowspan() {
      // 二维数组，用于存放单元格合并规则
      const spanArr = []
      // 用于存储相同项的开始index
      let position = 0
      this.yoyDataList.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1)
          position = 0
        } else {
          if (this.yoyDataList[index].year === this.yoyDataList[index - 1].year) {
            spanArr[position] += 1 // 有相同项
            spanArr.push(0) // 名称相同后往数组里面加一项0
          } else {
            spanArr.push(1) // 同列的前后两行单元格不相同
            position = index
          }
        }
      })
      return spanArr
    }
  }
}
</script>

<style scoped  lang="scss">
  .height {
    height: 80%;
    width: 80%;
  }
//   /deep/.el-table{
//   overflow: auto
// }

// /deep/.el-table--scrollable-x /deep/.el-table__body-wrapper{
//   overflow-x :visible
// }

// /deep/.el-table__body-wrapper{
//   overflow :visible
// }

// /deep/.el-table__header-wrapper{
//    overflow :visible
// }

// /deep/.el-table__footer-wrapper{
//  overflow :visible
// }

// /deep/.el-table::after{
//   position :relative !important

// }
/deep/.el-table .gray {
    background: #E6A23C !important;
  }

</style>

